<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">订单详情</p>
    </van-nav-bar>
    <div class="address">
      <van-tag type="danger">地址</van-tag>
      <div class="detail van-ellipsis">{{ address }}</div>
    </div>
    <div class="shop">
      <van-card class="goods-card"
                @click-thumb="showDetail('/shopDetail/'+product.proid)"
                :price="Math.floor(product.originprice*product.discount/10).toFixed(2)"
                :title="product.proname"
                :thumb="product.swiper&&product.swiper[0]">
        <template #tags>
          <div style="margin-top: 5px">
            <van-tag plain color="#ffe1e1" text-color="#ad0000">{{
                orderDetail.size && orderDetail.size + '码'
              }}
            </van-tag>
            <van-tag plain color="#ffe1e1" text-color="#ad0000" style="margin-left:5px">{{
                orderDetail.count && orderDetail.count + '件'
              }}
            </van-tag>
          </div>
        </template>
      </van-card>
    </div>
    <van-cell-group style="margin-top: 10px">
      <van-cell title="订单id">
        <div>{{ orderid }}</div>
      </van-cell>
      <van-cell title="收货人">
        <div>{{ person }}</div>
      </van-cell>
      <van-cell title="电话">
        <div>{{ phone }}</div>
      </van-cell>
      <van-cell title="下单时间">
        <div>{{ ordertime }}</div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { NavBar, Tag, Card } from 'vant'
import { requestOrderDetail } from '../../api/order'
import Vue from 'vue'

Vue.use(NavBar)
Vue.use(Tag)
Vue.use(Card)

export default {
  name: 'OrderDetail',
  data () {
    return {
      orderid: '',
      address: '',
      product: {},
      person: '',
      phone: '',
      ordertime: '',
      orderDetail: {
        size: 'x',
        count: '0'
      }
    }
  },
  created () {
    const { orderid } = this.$route.params
    requestOrderDetail(orderid).then(res => {
      this.orderid = res.data.orderid
      this.orderDetail = res.data
      if (['北京市', '上海市', '天津市', '重庆市'].includes(res.data.address[0].province)) {
        res.data.address[0].province = ''
      }
      this.product = res.data.product[0]
      this.address = res.data.address[0].province + res.data.address[0].city + res.data.address[0].county + res.data.address[0].addressDetail
      this.person = res.data.address[0].name
      this.phone = res.data.address[0].tel
      this.ordertime = res.data.time.toString().split('T').join(' ').split('.').slice(0,1).join("")
    })
  },
  methods: {
    back () {
      this.$router.back()
    },
    showDetail (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  text-align: left;
  font-size: 14px;
  color: #222;
  overflow: auto;

  .address {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px 12px;
    height: 40px;

    .detail {
      flex: 1;
      padding-left: 7px;
      font-size: 14px;
    }
  }

  .shop {
    margin-top: 10px;

    .goods-card {
      margin: 0;
      padding: 15px 10px;
      background-color: #fff;
      text-align: left;
      border-bottom: 1px solid #f5f5f5;
    }
  }

  .van-cell__title, {
    -webkit-flex: none;
    flex: none;
  }
}

</style>
